<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>测点曲线详情</title>
    <!--<link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="js/echarts.min.js" ></script>-->
     <link th:href="@{/css/base.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/js/rem.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <style>
    	html,body{width: 100%;height: 100%;overflow: hidden;}
    	.titel1{font-size: 0.34rem;font-weight: bolder;margin-top:0.6rem;margin-left: 0.3rem;}
    	.time1{font-size: 0.18rem;margin-left: 0.3rem;margin-top: 20px;color: #9d9d9d;}
    </style>
   	
</head>
<body>
	<div class="box">
		<div class="titel1">测点<span class="a1"></span></div>
		<div class="time1"><span class="start"></span>--<span class="end"></span></div>
		<div class="chart" id="chart" style="height: 300px;width: 320px;margin-left: 0.3rem;">
		</div>
	</div>
    <script  th:inline="javascript">
		var globalList = /*[[${data}]]*/ 'Sebastian';
		console.log(globalList);
		var startTime = globalList.startTime;
		var endTime = globalList.endTime;
		$(".start").html(startTime);
		$(".end").html(endTime);
		var type = globalList.type;
		if(type==1){
			$(".a1").html("瞬时流量")
		}else if(type==2){
			$(".a1").html("电源电压")
		}else if(type==3){
			$(".a1").html("GPRS信号强度")
		}else if(type==4){
			$(".a1").html("压力")
		}else if(type==5){
			$(".a1").html("水位")
		}
		
		window.onload = function() {
			function times(timestamp){
				 var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		        var Y = date.getFullYear() + '-';
		        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        var D = date.getDate() + ' ';
		        var h = date.getHours() + ':';
		        var m = date.getMinutes() + ':';
		        var s = date.getSeconds();
		        return Y+M+D+h+m+s;
			}
			
			
                 
                 
					 var myChart = echarts.init(document.getElementById("chart"));
					 window.onresize = myChart.resize;
					 var option = {
			              title: {
			                text: '计量分区',
			                show: false
			              },
			              tooltip: {
			                trigger: 'axis'
			              },
			             
			               dataZoom: [//给x轴设置滚动条  
			                           {  
			                               start:0,//默认为0  
			                               end: 10,  
			                               type: 'slider',  
			                               show: true,  
			                               xAxisIndex: [0],  
			                               handleSize: 0,//滑动条的 左右2个滑动条的大小  
			                               height: 8,//组件高度  
			                               left: 50, //左边的距离  
			                               right: 40,//右边的距离  
			                               bottom: 26,//右边的距离  
			                               handleColor: '#ddd',//h滑动图标的颜色  
			                               handleStyle: {  
			                                   borderColor: "#cacaca",  
			                                   borderWidth: "1",  
			                                   shadowBlur: 2,  
			                                   background: "#ddd",  
			                                   shadowColor: "#ddd",  
			                               },  
			                               fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{  
			                                   //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
			                                   //给第一个设置0，第四个设置1，就是垂直渐变  
			                                   offset: 0,  
			                                   color: '#1eb5e5'  
			                               }, {  
			                                   offset: 1,  
			                                   color: '#5ccbb1'  
			                               }]),  
			                               backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色  
			                               showDataShadow: false,//是否显示数据阴影 默认auto  
			                               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true  
			                              
			                               filterMode: 'filter'
			                           },  
			                           //下面这个属性是里面拖到  
			                           {  
			                               type: 'inside',  
			                               show: true,  
			                               xAxisIndex: [0],  
			                               start: 0,//默认为1  
			                               end: 50
			                           },  
			                       ],
			              showDataShadow: 'false',
			              legend: {
			              	  type: 'scroll',
			              },
			               grid: {
					        left: '6%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
		    				},
			              xAxis: {
			                type: 'category',
			                boundaryGap: false,
			                data: []
			              },
			              yAxis: {},
			              series: []
            		};
            		
//		            var type = 2;
            		for (var i = 0; i < globalList.set.length; i++) {
            			var instantaneousFlowCon = [];
		            var supplyVoltageCon = [];
		            var gprsSignalIntensityCon = [];
		            var pressureCon = [];
		            var waterLevelCon = [];
		            var timeCon = [];
		              titles = '';
		              for (var k = 0; k < globalList.set[i].list.length; k++) {
		                timeCon.push(times(globalList.set[i].list[k].creattime));
		                instantaneousFlowCon.push(globalList.set[i].list[k].param)
		              }
		              arrCon = instantaneousFlowCon
		              titles = globalList.set[i].name;
		              option.series.push({
		                name: titles,
		                type: 'line',
		                symbolSize: 8,
		                data: arrCon
		              });
		              option.xAxis.data = timeCon;
		                myChart.setOption(option);
		              // 使用刚指定的配置项和数据显示图表。
		            }
                
                 	
                 	
			
		}
                 	
                 	
                 	
                 	
    	
	</script>
</body>
</html>